home *** CD-ROM | disk | FTP | other *** search
/ MacHome 2001 January / MacHome Magazine Demo Disc January 2001.iso / mac / Software / Applications / PageSpinner 3.0.1.sea / PageSpinner 3.0.1 / Examples / JavaScript / PopupMenu2 / PopupMenu2
Encoding:
Text File  |  2000-10-16  |  2.6 KB  |  59 lines  |  [TEXT/JyWs]
  1. <html>
  2. <head>
  3. <title>Popup Menu v2</title>
  4. </head>
  5.  
  6. <body bgcolor=FFFFFF text=000000>
  7. <h1>JavaScript Popup Menu v2</h1>
  8.  
  9. <p><b>This page contains popup menu used for automatically selecting a page or URL</b></p>
  10.  
  11.  
  12. <p>Here is another example on how JavaScript can be used in a form with a popup menu that has links to other pages. This example does not require a special "Go" button, the actions takes place after a selection is made in the pop up menu.</p>
  13.  
  14. <form>
  15. Select a Page: <select name="menu" onChange="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  16. <option selected value="index.html">Contents 
  17. <option value="groucho.html">Groucho 
  18. <option value="harpo.html">Harpo 
  19. <option value="chico.html">Chico 
  20. <option value="zeppo.html">Zeppo 
  21. </select>
  22. </form> 
  23.  
  24. <hr>
  25. <b>How to use</b>
  26. <blockquote>
  27. <p>The source of the popup menu looks like this:</p>
  28.  
  29. <pre><FORM>
  30. <SELECT NAME="menu" onChange="top.location.href =
  31.  this.form.menu.options[this.form.menu.selectedIndex].value">
  32. <OPTION SELECTED VALUE="index.html">Contents 
  33. <OPTION VALUE="groucho.html">Groucho 
  34. <OPTION VALUE="harpo.html">Harpo 
  35. <OPTION VALUE="chico.html">Chico 
  36. <OPTION VALUE="zeppo.html">Zeppo 
  37. </SELECT>
  38. </FORM></pre>
  39. <p>
  40. Change the links and text to be displayed in the menu by editing the lines containing the <code>OPTION</code> tags. Note that you can also use full URL's in the VALUE attribute.
  41. </blockquote>
  42. <hr>
  43. <p>
  44. <b>Programming notes</b>
  45. <blockquote>
  46. <p>The actual JavaScript is in the selection list's onChange handler. The JavaScript array <code>this.form.menu.options</code> is an array of the option tags (with its contents)  in the form named "menu". To find which menu item that is selected we can use the property <code>this.form.menu.selectedIndex</code>, that holds the index of the selected item.</p>
  47.  
  48. <p>
  49. We then get the name of the page by accessing the value attribute of the selected  item in the array with the expression <code>this.form.menu.options[this.form.menu.selectedIndex].value</code>.</p>
  50.  
  51. <p>
  52. <code>top.location.href</code> is the address of the url to be displayed in the window. Since we set <code>top.location</code> to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame.</p>
  53.  
  54. <p>
  55. If you want to change the contents inside a specific frame, you can try to replace <code>top</code> with the <tt>top.frames.<i>name_of_the_frame</i></tt>. For example, if the frame is named "contact" in the frame definition page, the frame's source can be accessed like this: <code>top.frames.contact.location.href</code>.</p>
  56. </blockquote>
  57. </body>
  58. </html>
  59.